import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils';
import { InputWithBtn, Row, ExtendBox } from 'bee/components/MakePlan';
import styles from 'bee/containers/MakePlan/styles';
import BtnPicker from 'bee/components/MakePlan/BtnPicker';
import { connect } from 'react-redux';
import { actions } from 'bee/redux/MakePlanRedux';

const PickerWithTitle = ({ title, data, handleSelect, ...props }) => (
  <View>
    <Row label={title} />
    <BtnPicker {...props}>
      {data.map((value, index) => (
        <BtnPicker.Item value={value} label={value} key={index} />
      ))}
    </BtnPicker>
  </View>
);

PickerWithTitle.propTypes = {
  title: PropTypes.string.isRequired,
  data: PropTypes.arrayOf(PropTypes.string).isRequired,
  handleSelect: PropTypes.func.isRequired,
};

// @flow
type Props = {
  info: object,
};

class PlanBox extends Component<Props> {
  constructor() {
    super();

    this.state = {
      hidden: true,
      guaranteePeriod: '', // 保障期间
      feePeriod: '', // 交费期间
      pickPeriod: '', // 领取区间
      supportPlan: '', // 保障计划
      excess: '', // 免赔额
      scale: '', // 赔付比例
      coverage: '', // 保额
      permium: '', // 保费
    };
  }

  render() {
    const { info } = this.props;

    return (
      <View style={styles.insuranceView}>
        <ExtendBox>
          <Row label={info.name}>
            <Icon
              color={colors['1001']}
              name={Names.xuanzhong}
              size={px2dp(36)}
              onPress={() => this.setState({ hidden: !this.state.hidden })}
            />
          </Row>
          <Text>{JSON.stringify(this.state)}</Text>
          {this.state.hidden ? null : (
            <View>
              <PickerWithTitle
                title="保障期间"
                data={info.guarantees}
                selectedValue={this.state.guaranteePeriod}
                onValueChange={value => {
                  this.setState({ guaranteePeriod: value });
                }}
              />
              <PickerWithTitle
                title="交费期间"
                data={info.fees}
                selectedValue={this.state.feePeriod}
                onValueChange={value => {
                  this.setState({ feePeriod: value });
                }}
              />
              <PickerWithTitle
                title="领取期间"
                data={info.picks}
                selectedValue={this.state.pickPeriod}
                onValueChange={value => {
                  this.setState({ pickPeriod: value });
                }}
              />
              <PickerWithTitle
                title="保障计划"
                data={info.supports}
                selectedValue={this.state.supportPlan}
                onValueChange={value => {
                  this.setState({ supportPlan: value });
                }}
              />

              <Row label="免赔额">
                <InputWithBtn
                  value={this.state.excess}
                  onChangeText={value => {
                    this.setState({ excess: value });
                  }}
                />
              </Row>
              <Row label="赔付比例">
                <InputWithBtn
                  value={this.state.scale}
                  onChangeText={value => {
                    this.setState({ scale: value });
                  }}
                />
              </Row>
              <Row label="保额">
                <InputWithBtn
                  value={this.state.coverage}
                  onChangeText={value => {
                    this.setState({ coverage: value });
                  }}
                />
              </Row>
              <Text>最低基本保额为10000元，超过部分为10000元的整数倍</Text>
              <Row label="保费">
                <InputWithBtn
                  value={this.state.permium}
                  onChangeText={value => {
                    this.setState({ permium: value });
                  }}
                />
              </Row>
            </View>
          )}
        </ExtendBox>
      </View>
    );
  }
}

const mapStateToProps = state => ({
  info: state.risk.riskInfo,
});

const mapDispatchToProps = dispatchEvent => {
  const dispatch = dispatchEvent;
  return {
    changeRiskInfo: riskInfo => {
      dispatch(actions.changeRiskInfo(riskInfo));
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PlanBox);
